<template>
  <!-- 校招岗位地区招聘趋势 v-loading="loading"-->
  <div class="content aContent">
    <span class="tinyTitle">
      <div class="titleFlag"></div>
      {{ "招聘量企业排行" }}
    </span>
    <el-row class="search-container">
      <el-form ref="form" label-width="auto">
        <el-form-item label="统计时间：">
          <el-date-picker
            v-model="selectBetweenTime"
            :clearable="false"
            size="small"
            type="monthrange"
            align="right"
            unlink-panels
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
            :picker-options="pickerOptions"
            @change="handleDateChange"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </el-row>
    <div class="chanceContent">
      <template v-if="chanceList && chanceList.length">
        <div
          class="company-item"
          v-for="(item, index) in chanceList"
          :key="index"
          @click="handleClickJob(item)"
        >
          <div class="company-item-left">
            <img :src="item.logoUrl" class="company-item-logo" alt="" />
            <div class="company-item-left-content">
              <div class="company-item-name">{{ item.comName }}</div>
              <div class="company-item-content">
                {{ getCompanyContent(item) }}
              </div>
              <div class="company-item-desc">
                <div class="company-item-desc-title1">企业应届生招聘职位数:</div>
                <div class="company-item-desc-title2">
                  {{ item.totalJobCnt + "个" }}
                </div>
                <div class="company-item-desc-title1">正在招聘</div>
                <div class="company-item-desc-title2">
                  {{
                    item.positionName +
                    " " +
                    item.comLowSal +
                    "K" +
                    "-" +
                    item.comHighSal +
                    "K"
                  }}
                </div>
                <div class="company-item-desc-title1">等</div>
                <div class="company-item-desc-title2">
                  {{ item.currentJobCnt + "个" }}
                </div>
                <div class="company-item-desc-title1">职位</div>
              </div>
            </div>
          </div>
          <div class="company-item-right">
            <div class="company-item-salary">{{ getCompanySalary(item) }}</div>
            <el-button
              type="primary"
              size="small"
              @click.stop="handleClickJob(item)"
              >查看详情</el-button
            >
          </div>
        </div>
      </template>
      <el-empty class="empty" description="暂无数据" v-else></el-empty>
    </div>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="tablePage.pageNum"
        :page-size="tablePage.pageSize"
        :page-sizes="pageSizes"
        :total="tablePage.total"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script>
import { getCampusProfessionCompanyList } from "@/api/home.js";
import companyCheckbox from "@/components/companyCheckbox/index";
export default {
  name: "workBarChart",
  components: {
    companyCheckbox,
  },
  props: {
    positionTagId: {
      type: String,
      default: "",
    },
  },
  watch: {
    positionTagId: {
      handler(val) {
        if (val) {
          this.positionTagId = String(val);
          this.fetchData();
        } else {
          this.chartDataIsNotEmpty = false;
        }
      },
      // immediate: true,
    },
  },
  data() {
    return {
      selectBetweenTime: [],
      pickerMinDate: "",
      firstDayofLastMonth: "",
      pickerOptions: {
        showClear: false,
        disabledDate: (time) => {
          const nowTime = time.getTime();
          if (nowTime < 1672502400000 || nowTime > this.firstDayofLastMonth) {
            return true;
          }
          if (this.pickerMinDate) {
            const monthsDiff =
              Math.abs(nowTime - this.pickerMinDate) /
              (1000 * 60 * 60 * 24 * 30);
            // 如果相差的月份大于6个月，则禁用该日期
            return monthsDiff > 6 || nowTime < 1672502400000;
          }
        },
        onPick: (obj) => {
          this.pickerMinDate = new Date(obj.minDate).getTime();
        },
      },
      isSetDefaultTime: false,
      isSetDefaultRegion: true,
      currentChartRegionName: "全国",
      loading: false,
      chanceList: [],
      tablePage: {
        pageNum: 1, // 第几页
        pageSize: 5, // 每页多少条
        total: 0, // 总记录数
      },
      pageSizes: [5, 10, 20],
    };
  },
  computed: {
    isLabelShow() {
      return this.$store.state.chart.isLabelShow;
    },
  },
  created() {
    // 创建一个表示当前日期的 Date 对象
    var currentDate = new Date();

    // 将当前日期设置为本月的第一天
    currentDate.setDate(1);

    // 将当前日期减去一天，得到上个月最后一天
    currentDate.setDate(0);

    // 设置时间为零点
    currentDate.setHours(0, 0, 0, 0);

    // 获取时间戳
    var timestamp = currentDate.getTime();

    this.firstDayofLastMonth = timestamp;
  },
  mounted() {
    this.getDefaultData();
    if (!this.positionTagId) {
      this.chartDataIsNotEmpty = false;
    }
  },
  methods: {
    getCompanyContent(item) {
      return (
        item.locationRegionName +
        " - " +
        item.comTypeName +
        " - " +
        item.tradeName +
        " - " +
        item.comScaleName
      );
    },
    getCompanySalary(item) {
      if (!item.comLowSal || !item.comHighSal) {
        return "面议";
      }else {
        return item.comLowSal + "K" + "-" + item.comHighSal + "K";
      }
    },
    getDefaultData() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let newYear = 0;
      let newMonth = 0;
      let newDateArr = [];
      for (let i = 0; i < 7; i++) {
        //这里是获取前六个月,所以循环6次,根据需要修改
        if (month - i < 1) {
          //这里的判断是如果当前月份往前推到了去年  需要做的处理
          newYear = year - 1;
          newMonth =
            month - i + 12 >= 10 ? month - i + 12 : "0" + (month - i + 12);
          newDateArr.push(newYear + "-" + newMonth + "-" + "01"); //这里拼接格式化,在时间中间加了个-,根据实际需求来
        } else {
          newMonth = month - i >= 10 ? month - i : "0" + (month - i); //这里是对月份小于10做加前面加0处理
          newDateArr.push(year + "-" + newMonth + "-" + "01");
        }
      }
      //这里就最后得到当前年月前六个月组成的时间数组,根据需要赋值使用即可
      const end = newDateArr[1];
      const start = newDateArr[6];
      this.selectBetweenTime = [start, end];
    },
    getMonth(calMonth) {
      // 解析日期字符串
      const date = new Date(calMonth);

      // 获取月份和年份
      const month = date.getMonth() + 1; // getMonth() 返回 0-11，所以需要加 1
      // 格式化为“6月2024”格式
      return `${month}月`;
    },
    fetchData() {
      this.loading = true;
      const params = {
        positionTagId: this.positionTagId, //this.positionTagId
        pageNo: this.tablePage.pageNum,
        pageSize: this.tablePage.pageSize,
        groupByColumnType: "10",
        orderByColumnType: "20",
        // keyType: "3",
      };
      if (this.selectBetweenTime != null && this.selectBetweenTime != "") {
        params.selectBeginTime = this.selectBetweenTime[0];
        params.selectEndTime = this.selectBetweenTime[1];
      }
      // params.keyId = this.selectedCompanyList[0],
      // console.log(
      //         "----------getCampusProfessionCompanyList------招聘量企业排行--------->params",
      //         params
      //       );
      getCampusProfessionCompanyList(params)
        .then((res) => {
          if (res.code == 200) {
            // console.log(
            //   "----------getCampusProfessionCompanyList------薪酬企业排行--------->res.data",
            //   res.data
            // );
            this.chanceList = res.data.map(function (v) {
              // if (v.comHighSal && v.comLowSal && v.positionHighSal && v.positionLowSal) {
              //   v.comHighSal = (v.comHighSal / 1000).toFixed(1) + 'k';
              //   v.comLowSal = (v.comLowSal / 1000).toFixed(1) + 'k';
              //   v.positionHighSal = (v.positionHighSal / 1000).toFixed(1) + 'k';
              //   v.positionLowSal = (v.positionLowSal / 1000).toFixed(1) + 'k';
              // }
              if (!v.logoUrl) {
                v.logoUrl = "http://img3.job1001.com/uppic/nocypic.gif";
              }
              return v;
            });
            this.tablePage.total = res.pageparam.sums;
          }
        })
        .catch((e) => {
          //console.log("e");
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleDateChange(val) {
      if (this.isSetDefaultTime) {
        this.isSetDefaultTime = false;
        return;
      }
      this.pickerMinDate = null;
      this.fetchData();
    },
    onCompanyChange(val) {
      // console.log("--------------------->onCompanyChange", val);
      if (val && val.length) {
        this.selectedCompanyList = [];
        val.forEach((item) => {
          this.selectedCompanyList.push(item.split("-")[0]);
        });
      } else {
        this.selectedCompanyList = [];
      }
      this.fetchData();
    },
    handlePageChange(currentPage) {
      this.tablePage.pageNum = currentPage;
      this.fetchData();
      // 在此刷新数据
    },
    handleSizeChange(pageSize) {
      this.tablePage.pageSize = pageSize;
      this.fetchData();
      // 在此刷新数据
    },
    handleClickJob(item) {
      const path = `/company-detail?comId=${item.comId}&isShowQRCode=false`;
      let routeData = this.$router.resolve({
        path
      });
      console.log("---------->handleClickJob", item);
      window.open(routeData.href, '_blank');
    },
  },
};
</script>

<style lang="scss" scoped>
.pink {
  font-weight: bold;
}
.green {
  font-weight: bold;
}
.blue {
  font-weight: bold;
}
.skyBlue {
  font-weight: bold;
}
.brown {
  font-weight: bold;
}
.content {
  margin: 0px 12px;
}
.tinyTitle {
  display: flex;
  align-items: center;
  font-size: 18px;
  margin-top: 16px;
  color: #222;
  font-weight: bold;
  margin-bottom: 22px;
  .titleFlag {
    width: 5px;
    height: 15px;
    border-radius: 3px;
    background: #4880ff;
    margin-right: 12px;
  }
}
.chanceContent {
  display: block;
  width: 100%;
  .company-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 24px 16px;
    border: 1px solid #f3f3f3;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 8px 18px 1px #ffffff;
    cursor: pointer;

    .company-item-left {
      display: flex;
      align-content: center;
      .company-item-logo {
        width: 80px;
        height: 80px;
        border-radius: 8px;
        margin: 24px 16px 24px 0px;
        object-fit: contain;
        border: 1px solid #f3f3f3;
      }
      .company-item-left-content {
        display: block;
        align-content: center;
        .company-item-name {
          line-height: 40px;
          font-size: 18px;
          font-weight: bold;
          height: 40px;
        }
        .company-item-content {
          line-height: 40px;
          font-size: 14px;
          height: 40px;
          color: #555555;
        }
        .company-item-desc {
          display: flex;
          .company-item-desc-title1 {
            line-height: 40px;
            font-size: 14px;
            color: #555555;
            height: 40px;
          }
          .company-item-desc-title2 {
            line-height: 40px;
            font-size: 18px;
            font-weight: bold;
            color: #f04646;
            height: 40px;
            margin: auto 4px;
          }
        }
      }
      
    }
    .company-item-right { 
        display: block;
        text-align: right;
        // align-content: center;
        .company-item-salary {
          line-height: 40px;
          font-size: 18px;
          font-weight: bold;
          color: #f04646;
          height: 40px;
          margin-bottom: 4px;
        }
  
      }
  }
}
.pagination {
  margin: auto;
}
::v-deep .el-date-editor {
  background: #fafcfe;
  border-radius: 4px;
  border: 1px solid #e4edf8;
}
::v-deep .el-form-item:last-of-type {
  margin-bottom: 0px;
}
::v-deep .el-form-item__label {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #555555;
  line-height: 22px;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 内容超出容器部分隐藏 */
  text-overflow: ellipsis; /* 使用省略号表示被截断的内容 */
}
::v-deep .el-form-item {
  margin-bottom: 6px;
}
::v-deep .el-form-item__label-wrap {
  margin-left: 0px !important;
  margin-top: 10px;
}
.search-container {
  display: flex;
  align-items: center;
}
</style>
